<template>
  <div class="sign">
    <canvas id="canvas" :width="width" :height="height"></canvas>
    <div style="padding:10px 0 0 180px;">
      <input @click="save"
               type="button"
               value="保 存"
               class="tcSubmit" />
        <input @click="clear"
               type="button"
               value="清 除"
               class="tcCancel" />
    </div>
  </div>
</template>

<script>
  /*
  * width   canvas 宽度
  * height  canvas 高度
  * strokeStyle  线条颜色
  * showUrl   是否显示预览图片
  * imgWidth  img 宽度
  * imgHeight img 高度
  * draw_clear   //监听清空事件
  * draw_save    //监听保存事件 返回base64 img 路径
  * */
  var preHandler = function ( e ) {e.preventDefault();};
  export default {
    name : 'drawSign',
    props : {
      width : {
        type : String,
        default : '560'
      },
      height : {
        type : String,
        default : '250'
      },
      strokeStyle:{
        type : String,
        default : '#000'
      },
      showUrl:{
        type : Boolean,
        default : true
      },
      imgWidth:{
        type : String,
        default : '200'
      },
      imgHeight:{
        type : String,
        default : '200'
      }
    },
    data () {
      return {
        flag:true,
        canvas : null,       //canvas
        ctx : null,          //ctx canvas对象
        stroke_info:null,    //当前绘图的坐标
        url:'',              //base64 图像
      }
    },
    methods : {



dealImage(path, obj, callback){ //图片压缩与转码
   var img = new Image();
   img.src = path;
   img.onload = function(){
   var that = this;
   
   // 默认按比例压缩
   var w = that.width,
   h = that.height,
   scale = w / h;
   w = obj.width || w;
   h = obj.height || (w / scale);
   var quality = 0.9; // 默认图片质量为0.7
   //生成canvas
   var canvas = document.createElement('canvas');
   
   
   var ctx = canvas.getContext('2d');
   // 创建属性节点
   var anw = document.createAttribute("width");
   anw.nodeValue = w;
   var anh = document.createAttribute("height");
   anh.nodeValue = h;
   canvas.setAttributeNode(anw);
   canvas.setAttributeNode(anh);
   ctx.drawImage(that, 0, 0, w, h);
   // 图像质量
   if(obj.quality && obj.quality <= 1 && obj.quality > 0){
      quality = obj.quality;
   }
   var base64 = canvas.toDataURL('image/jpg', quality );
   //console.log(base64.length)
   // 回调函数返回base64的值
   callback(base64);
   }
  }	,









      init () {
        let that = this;
        this.canvas = document.getElementById('canvas');
        this.ctx = this.canvas.getContext('2d');
        this.stroke_info = this.canvas.getBoundingClientRect();
        this.canvas.addEventListener('mousedown',function ( event ) {
          that.darwStart(event);
          that.flag=true
        });
        this.canvas.addEventListener('mouseup', function(event) {
            that.flag=false
        });
        this.clear();
      },
      darwStart(e){
        let that = this;
        let t = e;
        this.ctx.strokeStyle = this.strokeStyle;
        this.ctx.beginPath();  //清空所有绘画路径
        this.ctx.moveTo(t.clientX - this.stroke_info.left, t.clientY - this.stroke_info.top);
        this.canvas.addEventListener('mousemove',function (event) {
           that.darwMove(event);
        })
        this.canvas.addEventListener('mouseup',function (event) {
           that.flag = false
        })
      },
      darwMove(e){
        if(this.flag){
          let t = e
          this.ctx.lineTo(t.clientX - this.stroke_info.left, t.clientY - this.stroke_info.top);
          this.ctx.stroke();
        }
      },
      clear () {
        this.ctx.clearRect(0,0,this.width, this.height);
        this.url = '';
        this.$emit('draw_clear');
      },
      save () {
         
        let data = this.canvas.toDataURL();
        //是否显示预览截图
        if(this.showUrl){
          this.url = data;
        }
        
        let query = {url : data};
        this.$emit('draw_save', query);
        // console.log(data)
        // console.log(this.canvas);
      }
    },
    mounted () {
      this.$nextTick(_ => {
        this.init()
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #canvas {
    border: 1px solid #cacaca;
    margin:0 auto;
    cursor: crosshair;
  }
  .preview-img{
    margin: 0 auto;
  }
  .tcSubmit {
    height: 36px;
    width: 85px;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #4080ff;
   /* background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
  }
  .tcCancel {
    height: 36px;
    width: 85px;
    border: 1px solid #5ea0ff;
    color: #4080ff;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    margin-left: 5px;
  }
  .tcSubmit:hover,
  .tcCancel:hover {
    opacity: 0.8;
  }
</style>
